<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>瀑布流布局</title>
	<style type="text/css">
	*{margin:0;padding: 0}
	#main{position: relative;}
	.box{padding: 5px 0 0 5px;
		float: left;}
	.pic{
		padding: 10px;
		border:1px solid #ccc;
		border-radius: 5px;
		box-shadow: 0 0 3px #cc2;
		}
	.pic img{width:192px;
		height: auto}
	</style>
</head>
<body>
	<div id="main">
		<div class="box">
			<div class="pic">
				<img src="image/P_00.jpg" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="image/P_01.jpg" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="image/P_02.jpg" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="image/P_03.jpg" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="image/P_04.jpg" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="image/P_05.jpg" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="image/P_06.jpg" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="image/P_07.jpg" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="image/P_08.jpg" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="image/P_09.jpg" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="image/P_010.jpg" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="image/P_011.jpg" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="image/P_012.jpg" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="image/P_013.jpg" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="image/P_014.jpg" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="image/P_015.jpg" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="image/P_016.jpg" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="image/P_017.jpg" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="image/P_018.jpg" />
			</div>
		</div>
	</div>
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$(function(){
			waterfall();
			var dataInt={"data":[{"src":"P_01.jpg"},{"src":"P_02.jpg"},{"src":"P_03.jpg"},{"src":"P_04.jpg"},{"src":"P_05.jpg"},{"src":"P_06.jpg"}]}
			$(window).on("scroll",function(){
				if(checkScrollSlide()){
					$.each(dataInt.data,function(key,value){
						var oBox=$("<div>").addClass("box").appendTo($("#main"));
						var oPic=$("<div>").addClass("pic").appendTo($(oBox));
						$("<img>").attr("src","image/"+$(value).attr("src")).appendTo($(oPic));

					})
					waterfall();
				}
			})
		})
		function waterfall(){
			var $boxs=$("#main>div");
			var w=$boxs.eq(0).outerWidth();
			var cols=Math.floor($(window).width()/w);
			$("#main").width(w*cols).css("margin","0 auto");
			var hArr=[];
			$boxs.each(function(index,value){
				if (index<cols) {
					hArr.push($boxs.eq(index).outerHeight());
				}else{
					var minH=Math.min.apply(null,hArr);
					var minIndex=$.inArray(minH,hArr);
					$(value).css({
						"position":"absolute",
						"top":minH+"px",
						"left":minIndex*w+"px"
					})
					hArr[minIndex]+=$boxs.eq(index).outerHeight();
				}
			})
		}
		function checkScrollSlide(){
			var $lastBox=$("#main>div").last();
			var lastDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
			var scrollTop=$(window).scrollTop();
			var documentH=$(window).height();
			return (lastDis<scrollTop+documentH)?true:false;
		}	
	</script>
	
</body>
</html>